<template>
	<view class="item" @click="goto">
		<image src="/static/a.jpg" class="goodsimg"></image>
		<view class="goodsname">{{value.name}}</view>
	    <view class="price">
			<view class="small">￥</view>
			<view class="sale">{{value.priceFee}}</view>
			<view class="small">.00</view>
		</view>
	</view>
</template>

<script setup>
	//定义属性
	const props=defineProps({
		value:{
			type:Object,
			required:true,
			default:()=>{
				return {
					mainImgUrl:"",
					name:"",
					priceFee:0,
					supId:0
				}
			}
		}
	})
	
	//页面跳转
	function goto(){
		uni.navigateTo({
			"url":"/pages/goodsdetail/goodsdetail?id="+props.value.spuId
		});
	}
</script>

<style>
	.item {
		width: 350rpx;
		height: 480rpx;
		background-color: #fff;
		margin-top: 10px;
	}

	.goodsimg {
		width: 350rpx;
		height: 350rpx;
		border-top-left-radius: 7px;
		border-top-right-radius: 7px;
	}

	.goodsname {
		height: 70rpx;
		line-height: 35rpx;
		/* 限制显示的行数 */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 显示3行 */
		-webkit-box-orient: vertical;

		/* 溢出隐藏 */
		overflow: hidden;
		font-size: 12px;
	}
	
	.price{
		color: #d81e06;
		display: flex;
		align-items: baseline;
		font-weight: bold;
	}
	.sale{
		font-size: 16px;
	}
	.small{
		font-size: 10px;
	}
</style>
